import React from 'react';

// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

import './scss/echartarea.scss';

export default class NestPie extends React.Component {

  componentDidMount() {
    this.pieStyleEchart();
  }

  componentwillreceiveprops(nextProps) {
    this.pieStyleEchart();
  }
  
  pieStyleEchart() {
    let self = this;
    let pieEchart = echarts.init(this.refs.echartTypeNestPie);
    let option = {
      title: {
          text: '嵌套环形图',
          left: 'right',
          textStyle: {
              color: '#fff',
              fontSize: 16
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
          show: true,
          orient: 'vertical',
          x: 'left',
          data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'],
          textStyle: {
              color: '#fff'
          }
      },
      series: [{
              name:'访问来源',
              type:'pie',
              selectedMode: 'single',
              radius: [0, '45%'],
              label: {
                  normal: {
                      position: 'inner'
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[{
                value:335, 
                name:'直达'
              },{
                value:679,
                name:'营销广告'
              },{
                value:1548,
                name:'搜索引擎'
              }]
          },{
              name:'访问来源',
              type:'pie',
              radius: ['55%', '75%'],
              label: {
                  normal: {
                      // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                      // backgroundColor: '#eee',
                      // borderColor: '#aaa',
                      // borderWidth: 1,
                      // borderRadius: 4,
                      // rich: {
                      //     a: {
                      //         color: '#999',
                      //         lineHeight: 22,
                      //         align: 'center'
                      //     },
                      //     hr: {
                      //         borderColor: '#aaa',
                      //         width: '100%',
                      //         borderWidth: 0.5,
                      //         height: 0
                      //     },
                      //     b: {
                      //         fontSize: 16,
                      //         lineHeight: 33
                      //     },
                      //     per: {
                      //         color: '#eee',
                      //         backgroundColor: '#334455',
                      //         padding: [2, 4],
                      //         borderRadius: 2
                      //     }
                      // }
                      position: "inside"
                  }
              },
              data:[
                  {value:335, name:'直达'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1048, name:'百度'},
                  {value:251, name:'谷歌'},
                  {value:147, name:'必应'},
                  {value:102, name:'其他'}
              ]
          }
      ]
  };
    pieEchart.setOption(option, true);
  }

  render() {
    return (
      <div className="echart-type-area" ref="echartTypeNestPie"></div>
    )
  } 
}